<template>
  <div>
    <h1>options</h1>
    <pannel-item :labelName="'绑定的内容'"></pannel-item>
    <span class="btn" @click="handleBtnClick">测试</span>

    <div>
      <p>render mode </p>
      <render-demo></render-demo>
    </div>
    <div class=""></div>

    
  </div>
</template>

<script>
//  const vm = {

export default {
  data() {
    return {
      title: "测试实例Options",
    };
  },

  components: {
    'pannel-item': () => import('./components/Pannel'),
    'render-demo': () => import("./components/renders.vue"),
  },

  defaultList: [
    {
      name: "张三",
      age: 12,
    },
  ],

  mounted() {
    // console.log("this.$options", this.$options);
    // console.log("this.$options", this.$options.defaultList);
  },

  methods: {
    handleBtnClick() {
      console.log("this.$options", this.$options);
      console.log("this", this);
      console.log("this.$clots", this.$slots);
    },
  },
};

// export default  vm;
</script>

<style lang="stylus" scoped>
.btn
  padding 8px 15px
  background-color #4cd964
  color #fff
  border-radius: 4px
  cursor pointer
</style>